<script lang="ts" setup>

// 产品开始
import {getProductList, getProductListServer} from "@/api/product";
import HeadItemProductButton from "@/components/headers/HeadItemProductButton.vue";

const tabList = ref([])
const currentTabId = ref()
const currentTabVal = ref({})
const currentDetailId = ref(1)
const currentDetailLabel = ref('')
const currentDetailVal = ref({})
onMounted(()=>{
})

const getPageProductList = async () => {
  const {data} = await getProductListServer()
  if (data.length) {
    tabList.value = data
    currentTabVal.value = data[0]
    currentDetailVal.value = data[0]['productDetailsList'][0]
    currentDetailLabel.value = data[0]['productDetailsList'][0]['title']
  }
}
getPageProductList()

const setDetailInfo = (val: { id: number; title: string; }) => {
  currentDetailVal.value = val
  currentDetailId.value = val.id
  currentDetailLabel.value = val.title
}

const setTab = (val: { [x: string]: { id: number; }[]; id?: any; }) => {
  currentTabVal.value = val
  currentTabId.value = val.id
  currentDetailVal.value = val['productDetailsList'][0]
  currentDetailId.value = val['productDetailsList'][0].id
  currentDetailLabel.value = val['productDetailsList'][0].title
}
// 产品 结束
</script>

<template>
<div>

  <transition name="dropdown-fade-show">
    <div class="ht-menu-product">
      <div class="menu-left">
        <div class="menu-list">
          <NuxtLink :to="`/product?type=${item.id}`" class="menu-list-item"
                    v-for="item in tabList" :key="item.id"
                    @mouseenter="setTab(item)">
            <span>{{ item.title }}</span>
            <img class="normal" src="~/assets/icons/more_right_grey.png"/>
            <img class="active" src="~/assets/icons/more_right_blue.png"/>
          </NuxtLink>
        </div>
        <NuxtLink to="/product">
          <HeadItemProductButton label="产品中心"/>
        </NuxtLink>
      </div>
      <div class="menu-right">
        <div class="ht-product-demos-body">
          <div class="demos-left">
            <div class="list">
              <NuxtLink :to="'/product/'+currentDetailVal.id" target="_blank">
              <div class="item" :class="currentDetailVal.id===item.id?'active':''"
                   v-for="(item,index) in currentTabVal.productDetailsList"
                   :key="item.id" @mouseenter.stop="setDetailInfo(item)"
              >
                <span>{{ item.title }}</span>
                <img class="normal" src="~/assets/icons/more_right_grey.png"/>
                <img class="active" src="~/assets/icons/more_right_blue.png"/>
              </div>
              </NuxtLink>
            </div>
          </div>
          <div class="demos-right">
            <NuxtLink :to="'/product/'+currentDetailVal.id"  target="_blank">
              <img :src="currentDetailVal.productImage" alt="">
              <div class="title">
                <span>{{ currentDetailLabel }}</span>
              </div>
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </transition>
</div>
</template>

<style scoped lang="scss">
//超频
.ht-menu-product {
  width: 24rem;
  height: 8.16rem;
  background: #F7F7F7;
  box-shadow: 0 0.4rem 0.76rem 0.01rem rgba(0, 0, 0, 0.09);
  display: flex;
  position: relative;
  z-index: 999;

  .menu-left {
    width: 8.32rem;
    background: #FFFFFF;
    box-shadow: 0.11rem 0.04rem 0.41rem 0.01rem rgba(0, 0, 0, 0.07);
    padding-left: 2rem;

    .menu-list {
      margin-top: 1.03rem;
      margin-bottom: 1.41rem;

      .menu-list-item {
        display: block;
        width: 5.31rem;
        height: 1.07rem;
        background: #fff;
        font-size: 0.25rem;
        font-weight: 500;
        padding-left: 0.75rem;
        line-height: 1.16rem;
        border-bottom: 0.01rem solid #ECECEC;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        position: relative;

        img {
          position: absolute;
          right: 0.38rem;
          top: 0.51rem;
          width: 0.08rem;
          height: 0.14rem;

          &.active {
            display: none;
          }
        }

        &:hover {
          background: #EFF0F2;
          border-radius: 0.1rem;
          border-bottom: none;
          color: #2E6AFF;

          img {
            position: absolute;

            &.normal {
              display: none;
            }

            &.active {
              display: block;
            }
          }
        }
      }
    }


  }

  .menu-right {
    .ht-product-demos-body {
      margin-top: 1rem;
      display: flex;
      justify-content: space-between;
      padding-left: 0.65rem;

      .demos-left {
        width: 6.5rem;

        .title {
          font-size: 0.45rem;
          font-weight: bold;
          color: #111111;
        }

        .list {
          margin-top: 0;
          font-size: 0.25rem;
          font-weight: 400;
          color: #999999;

          .item {
            padding-left: 0.34rem;
            position: relative;
            cursor: pointer;
            border-bottom: 1px solid #ECECEC;
            padding-bottom: 0.24rem;
            margin-top: 0.29rem;

            img {
              position: absolute;
              right: 0.05rem;
              top: 0.11rem;
              width: 0.08rem;
              height: 0.14rem;

              &.active {
                display: none;
              }
            }

            &.active,&:hover {
              span{
                font-size: 0.23rem;
                color: #2E6AFF;
              }

              &::after {
                background: #2E6AFF;
              }

              img {
                &.normal {
                  display: none;
                }

                &.active {
                  display: block;
                }
              }
            }

            &:hover {
              color: #111;

              &::after {
                background: #2E6AFF;
              }
            }

            &::after {
              position: absolute;
              content: '';
              width: 0.09rem;
              height: 0.09rem;
              background: #999;
              border-radius: 1rem;
              left: 0;
              top: 0.13rem;
            }
          }
        }
      }

      .demos-right {
        width: 6.57rem;
        margin-top: 1rem;
        margin-left: 1.1rem;
        a{
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          align-items: center;
          margin-left: 0;
        }

        img {
          width: 5.33rem;
          //max-height: 3.1rem;
          object-fit: contain;
        }

        .title {
          text-align: center;
          margin-top: 0.4rem;
          font-size: 0.26rem;
          font-weight: bold;
          color: #111111;
          display: flex;
          justify-content: center;

          span {
            display: inline-block;
            padding-bottom: 0.08rem;
            border-bottom: 1px solid #C2C2C2;
          }
        }
      }

    }
  }
}
</style>
